package com.example.myapplication.base

import com.example.sihookuiklydemo.base.BasePager
import com.example.sihookuiklydemo.base.MyScrollPicker
import com.example.sihookuiklydemo.ble.getNewFloatPx
import com.example.sihookuiklydemo.utils.getCancelText
import com.example.sihookuiklydemo.utils.getConfirmText
import com.example.sihookuiklydemo.utils.getLanguage
import com.tencent.kuikly.core.base.Animation
import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ComposeView
import com.tencent.kuikly.core.base.ComposeAttr
import com.tencent.kuikly.core.base.ComposeEvent
import com.tencent.kuikly.core.base.Translate
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.base.ViewContainer
import com.tencent.kuikly.core.base.event.EventHandlerFn
import com.tencent.kuikly.core.directives.vforIndex
import com.tencent.kuikly.core.directives.vif
import com.tencent.kuikly.core.log.KLog
import com.tencent.kuikly.core.module.NotifyModule
import com.tencent.kuikly.core.nvi.serialization.json.JSONObject
import com.tencent.kuikly.core.reactive.handler.observable
import com.tencent.kuikly.core.reactive.handler.observableList
import com.tencent.kuikly.core.views.ScrollPicker
import com.tencent.kuikly.core.views.Switch
import com.tencent.kuikly.core.views.Text
import com.tencent.kuikly.core.views.View
import com.tencent.kuikly.core.views.compose.Button

internal class DeskHeightActionSheetView :
    ComposeView<DeskHeightActionSheetViewAttr, DeskHeightActionSheetEvent>() {
    var animated: Boolean by observable(false)
    private var chooseIdx: Int by observable(0)
    private var chooseValue: String by observable("")
    var didFirstLayout = false
    var isConfirm: Boolean by observable(false)
    private var list by observableList<String>()
    private var laber by observableList<String>()
    var ftLabel = ArrayList<String>()
    var inLabel = ArrayList<String>()
    var ftData = ArrayList<String>()
    var inData = ArrayList<String>()
    var chooseFtIndex = 0
    var chooseFtValue = ""
    var chooseInIndex = 0
    var chooseInValue = ""
    override fun created() {

        super.created()
        for (i in 67 until 121) {
            list.add("${i}")
        }
        attr.currentValue?.let {
            chooseIdx = list.indexOf(it)
        }
        ftLabel.add(getLanguage("common_unit_foot", "英寸"))
        inLabel.add(getLanguage("common_unit_inch", "英尺"))
        for (i in 2..3) {
            ftData.add(i.toString())
        }
        for (i in 0..11) {
            inData.add("$i")
        }
        attr.chooseFtValue?.let {
            chooseFtIndex = ftData.indexOf(it)
        }
        attr.chooseInValue?.let {
            chooseInIndex = inData.indexOf(it)
        }
        laber.add("cm")
    }

    override fun createEvent(): DeskHeightActionSheetEvent {
        return DeskHeightActionSheetEvent()
    }

    override fun createAttr(): DeskHeightActionSheetViewAttr {
        return DeskHeightActionSheetViewAttr()
    }

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            attr {
                absolutePosition(0f, 0f, 0f, 0f)
                justifyContentFlexEnd()
                if (ctx.animated) {
                    backgroundColor(Color(0, 0, 0, 0.5f))
                } else {
                    backgroundColor(Color(0, 0, 0, 0f))
                }
                animation(Animation.springEaseIn(0.5f, 0.92f, 1f), ctx.animated)


            }
            event {
                click {
                    ctx.animated = false
                }
                animationCompletion {
                    if (!ctx.animated) {
                        if (ctx.isConfirm) {
                            if (ctx.attr.heightUnit == 1) {
                                ctx.event.confirmImUnitClickHandler?.invoke(
                                    ctx.chooseFtValue,
                                    ctx.chooseInValue
                                )
                            } else {
                                ctx.event.confirmClickHandler?.invoke(ctx.chooseValue)
                            }

                        } else {
                            ctx.event.cancelClickHandler?.invoke()
                        }
                    }

                }
            }
            View {
                View {
                    attr {

                        alignSelfCenter()
                        backgroundColor(0xffe0e2e7)
                        size(40f, 3f)
                        marginTop(6f)
                        borderRadius(3f)
                    }
                }
                event {
                    click { }
                }
                attr {

                    backgroundColor((getPager() as BasePager).theme.colors.background)

                    paddingBottom(30f)
                    borderRadius(16f)
                    if (ctx.animated) {
                        transform(Translate(0f, 0f))
                    } else {
                        transform(Translate(0f, 1f))
                    }
                    animation(Animation.springEaseIn(0.5f, 0.92f, 1f), ctx.animated)
                }
                Text {
                    attr {
                        text("${ctx.attr.title}")
                        useDpFontSizeDim(true)
                        fontSize(17f)
                        marginTop(16f)
                        alignSelfCenter()
                        color((getPager() as BasePager).theme.colors.mainTextColor)
                    }
                }
                vif({ ctx.attr.heightUnit == 0 }) {
                    apply(ctx.metricPicker())
                }
                vif({ ctx.attr.heightUnit == 1 }) {
                    apply(ctx.imperialPicker())
                }


                View {
                    attr {
                        flexDirectionRow()
                        marginTop(8f)
                    }
                    Button {

                        attr {
                            titleAttr {
                                text(getCancelText())
                                color((getPager() as BasePager).theme.colors.mainTextColor)
                                useDpFontSizeDim(true)
                            }
                            size(
                                (ctx.pagerData.pageViewWidth - getNewFloatPx(48f)) / 2f,
                                getNewFloatPx(45f)
                            )
                            marginRight(getNewFloatPx(16f))
                            marginLeft(getNewFloatPx(16f))
                            borderRadius(getNewFloatPx(25f))
                            backgroundColor((getPager() as BasePager).theme.colors.grey_1a)
                        }
                        event {
                            click {
                                ctx.animated = false
                            }
                            /*animationCompletion {
                                if (!ctx.animated) {
                                    KLog.i("ActionSheetView", "animationCompletion $it")
                                    this@LanguageActionSheetView.emit(LanguageActionSheetEvent.CLOSE, ctx.chooseValue);
                                }
                            }*/
                        }
                    }
                    Button {

                        attr {
                            titleAttr {
                                text(getConfirmText())
                                color(Color.WHITE)

                                useDpFontSizeDim(true)
                            }
                            marginRight(getNewFloatPx(16f))
                            size(
                                (ctx.pagerData.pageViewWidth - getNewFloatPx(48f)) / 2f,
                                getNewFloatPx(45f)
                            )
                            backgroundColor(Color.RED)
                            borderRadius(getNewFloatPx(25f))

                        }
                        event {
                            click {
                                ctx.animated = false
                                ctx.isConfirm = true
                            }
                            /*animationCompletion {
                                if (!ctx.animated) {
                                    KLog.i("ActionSheetView", "animationCompletion $it")
                                    this@LanguageActionSheetView.emit(LanguageActionSheetEvent.CLOSE, ctx.chooseValue);
                                }
                            }*/
                        }
                    }
                }
            }


        }
    }

    fun metricPicker(): ViewBuilder {
        var ctx = this
        return {
            View {
                attr {
                    flexDirectionRow()
                    allCenter()
                    marginTop(24f)
                    marginBottom(24f)
                }
                MyScrollPicker(
                    ctx.list, defaultIndex = ctx.chooseIdx
                ) {
                    attr {

                        borderRadius(8f)

                        itemWidth = getNewFloatPx(80f)
                        itemHeight = getNewFloatPx(50f)
                        countPerScreen = 5
                        itemBackGroundColor = Color.TRANSPARENT
                        animatedToSelected = false
                        itemTextColorCenter =
                            (getPager() as BasePager).theme.colors.mainTextColor

                        alignSelfCenter()

                    }
                    event {
                        dragEndEvent { centerValue, centerItemIndex ->
                            ctx.chooseIdx = centerItemIndex
                            ctx.chooseValue = centerValue
                        }
                    }
                }
                MyScrollPicker(
                    ctx.laber
                ) {
                    attr {
                        borderRadius(8f)

                        itemWidth = getNewFloatPx(30f)
                        itemHeight = getNewFloatPx(50f)
                        countPerScreen = 5
                        itemBackGroundColor = Color.TRANSPARENT
                        itemTextColorCenter =
                            (getPager() as BasePager).theme.colors.mainTextColor
                        alignSelfCenter()

                    }
                    event {
                        dragEndEvent { centerValue, centerItemIndex ->

                        }
                    }
                }
            }
        }
    }

    fun imperialPicker(): ViewBuilder {
        var ctx = this
        return {
            View {
                attr {
                    flexDirectionRow()
                    allCenter()
                    marginTop(24f)
                    marginBottom(24f)
                }
                MyScrollPicker(
                    ctx.ftData, defaultIndex = ctx.chooseFtIndex
                ) {
                    attr {

                        borderRadius(8f)

                        itemWidth = getNewFloatPx(80f)
                        itemHeight = getNewFloatPx(50f)
                        countPerScreen = 5
                        itemBackGroundColor = Color.TRANSPARENT
                        animatedToSelected = false
                        itemTextColorCenter =
                            (getPager() as BasePager).theme.colors.mainTextColor

                        alignSelfCenter()

                    }
                    event {
                        dragEndEvent { centerValue, centerItemIndex ->
                            ctx.chooseFtIndex = centerItemIndex
                            ctx.chooseFtValue = centerValue
                        }
                    }
                }
                MyScrollPicker(
                    ctx.ftLabel
                ) {
                    attr {
                        borderRadius(8f)

                        itemWidth = getNewFloatPx(40f)
                        itemHeight = getNewFloatPx(50f)
                        countPerScreen = 5
                        itemBackGroundColor = Color.TRANSPARENT
                        itemTextColorCenter =
                            (getPager() as BasePager).theme.colors.mainTextColor
                        alignSelfCenter()

                    }
                    event {
                        dragEndEvent { centerValue, centerItemIndex ->

                        }
                    }
                }
                MyScrollPicker(
                    ctx.inData, defaultIndex = ctx.chooseInIndex
                ) {
                    attr {

                        borderRadius(8f)

                        itemWidth = getNewFloatPx(80f)
                        itemHeight = getNewFloatPx(50f)
                        countPerScreen = 5
                        itemBackGroundColor = Color.TRANSPARENT
                        animatedToSelected = false
                        itemTextColorCenter =
                            (getPager() as BasePager).theme.colors.mainTextColor

                        alignSelfCenter()

                    }
                    event {
                        dragEndEvent { centerValue, centerItemIndex ->
                            ctx.chooseInIndex = centerItemIndex
                            ctx.chooseInValue = centerValue
                        }
                    }
                }
                MyScrollPicker(
                    ctx.inLabel
                ) {
                    attr {
                        borderRadius(8f)

                        itemWidth = getNewFloatPx(60f)
                        itemHeight = getNewFloatPx(50f)
                        countPerScreen = 5
                        itemBackGroundColor = Color.TRANSPARENT
                        itemTextColorCenter =
                            (getPager() as BasePager).theme.colors.mainTextColor
                        alignSelfCenter()

                    }
                    event {
                        dragEndEvent { centerValue, centerItemIndex ->

                        }
                    }
                }
            }
        }
    }

    override fun viewDidLayout() {
        super.viewDidLayout()
        animated = true
    }


}


internal class DeskHeightActionSheetViewAttr : ComposeAttr() {
    var title = ""
    var currentValue: String? = null
    var chooseFtValue : String? = null
    var chooseInValue : String? = null
    var heightUnit: Int = 1
}

internal class DeskHeightActionSheetEvent : ComposeEvent() {
    var cancelClickHandler: (() -> Unit)? = null
    var confirmClickHandler: ((selectedValue: String) -> Unit)? = null
    var confirmImUnitClickHandler: ((selectedFtValue: String, selectedInValue: String) -> Unit)? =
        null

    fun onCancelClick(handler: () -> Unit) {
        cancelClickHandler = handler
    }

    fun onConfirmClick(handler: (selectedValue: String) -> Unit) {
        confirmClickHandler = handler
    }

    fun onConfirmImClick(handler: (selectedFtValue: String, selectedInValue: String) -> Unit) {
        confirmImUnitClickHandler = handler
    }
}

internal fun ViewContainer<*, *>.DeskHeightActionSheetEvent(init: DeskHeightActionSheetView.() -> Unit) {
    addChild(DeskHeightActionSheetView(), init)
}